<script>
/**
 * @desc 选择旅游出行的日期
 * @prop
 *  id: 当前旅游线路的标识
 */

import { mapState, mapMutations } from 'vuex'
import { dateFormate } from '@/utils'
import DatePanel from '@/components/date-panel'
import getFinalDateList from './getFinalDateList'
import closeIco from '@/assets/icons/close.svg'

export default {
  name: 'date-select',
  components: { DatePanel },
  props: {
    show: Boolean,
    handleClose: Function
  },
  data: () => ({ closeIco }),
  computed: {
    ...mapState('Order', ['currTravelDetail', 'currDatePrice']),
    finalDateList() {
      return getFinalDateList(this.currTravelDetail.routePrices)
    }
  },
  methods: {
    ...mapMutations('Order', { setOrder: 'setState' }),
    handleDateClick(obj) {
      this.setOrder({ currDatePrice: obj, travelDate: obj.date })
      this.handleClose()
    }
  }
}
</script>

<template>
  <div class="date-select" :class="{'show':show}">
    <div class="content-container" :class="{'show':show}">
      <div class="top-bar">
        <div class="title-bar">
          <p class="title">选择出行日期</p>
          <!-- <img :src="closeIco" class="close" @click="handleClose"> -->
          <span class="close" @click="handleClose">确定</span>
        </div>
        <div class="days-bar">
          <span class="day">日</span>
          <span class="day">一</span>
          <span class="day">二</span>
          <span class="day">三</span>
          <span class="day">四</span>
          <span class="day">五</span>
          <span class="day">六</span>
        </div>
      </div>

      <scroll-view
        scroll-y
        class="date-scroll-view"
      >
        <date-panel
          v-for="(v,i) in finalDateList"
          :key="i"
          :dateArr="v"
          :checkedDate="currDatePrice.date"
          :handleClick="handleDateClick"
        />
      </scroll-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.date-select {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.25s;
  visibility: hidden;
  opacity: 0;
  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.content-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: scroll;
  transition: all 0.25s;
  transform: translateY(100%);
  &.show {
    transform: translateY(0);
  }
}

.top-bar {
  border-bottom: 1px solid $border-color;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  color: $main-color;

  .close {
    width: 2em;
    // width: 30px;
    // height: 30px;
    padding: 20px;
  }
}

.days-bar {
  display: flex;
  .day {
    width: 107rpx;
    text-align: center;
  }
}

.date-scroll-view {
  flex: 1;
  overflow: scroll;
}
</style>
